<template>
  <!--侧边导航 -->
  <div id="nav"
       class="navfull">
    <div class="area clearfix">
      <div class="category-content"
           id="guide_2">

        <div class="category">
          <ul class="category-list"
              id="js_climit_li">

            <li class="appliance js_toggle relative"
                v-for="(category, index) in categories">
              <div class="category-info">
                <h3 class="category-name b-category-name">
                    <i><img src="static/images/cake.png"></i>
                    <a class="ml-22" :title="category.name">{{category.name}}</a>
                  </h3>
                <em>&gt;</em>
              </div>
              <div class="menu-item menu-in top">
                <div class="area-in">
                  <div class="area-bg">
                    <div class="menu-srot">
                      <div class="sort-side">
                        <dl class="dl-sort"
                            v-for="(secondCategory, index2) in category.children">
                          <dt><span :title="secondCategory.name">{{secondCategory.name}}</span></dt>
                          <dd v-for="(thirdCategory, index3) in secondCategory.children">
                            <a :title="thirdCategory.name"
                               :href="thirdCategory.url"><span>{{thirdCategory.name}}</span></a>
                          </dd>
                        </dl>
                      </div>
                      <!--<div class="brand-side">
                        <dl class="dl-sort">
                          <dt><span>实力商家</span></dt>
                          <dd><a rel="nofollow"
                               title="呵官方旗舰店"
                               target="_blank"
                               href="#"><span  class="red" >呵官方旗舰店</span></a></dd>
                          <dd><a rel="nofollow"
                               title="格瑞旗舰店"
                               target="_blank"
                               href="#"><span >格瑞旗舰店</span></a></dd>
                          <dd><a rel="nofollow"
                               title="飞彦大厂直供"
                               target="_blank"
                               href="#"><span  class="red" >飞彦大厂直供</span></a></dd>
                          <dd><a rel="nofollow"
                               title="红e·艾菲妮"
                               target="_blank"
                               href="#"><span >红e·艾菲妮</span></a></dd>
                          <dd><a rel="nofollow"
                               title="本真旗舰店"
                               target="_blank"
                               href="#"><span  class="red" >本真旗舰店</span></a></dd>
                          <dd><a rel="nofollow"
                               title="杭派女装批发网"
                               target="_blank"
                               href="#"><span  class="red" >杭派女装批发网</span></a></dd>
                        </dl>
                      </div>-->
                    </div>
                  </div>
                </div>
              </div>
              <b class="arrow"></b>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'yy-categories',
  mounted () {
    this.getCategories()
  },
  data () {
    return {}
  },
  computed: {
    ...mapGetters({
      categories: 'categories'
    })
  },
  updated () {
    this.initHoverEvent()
  },
  methods: {
    ...mapActions({
      getCategories: 'getCategories'
    }),
    initHoverEvent () {
      let $ = this.$
      $(document).ready(function () {
        $('li').hover(function () {
          $('.category-content .category-list li.first .menu-in').css('display', 'none')
          $('.category-content .category-list li.first').removeClass('hover')
          $(this).addClass('hover')
          $(this).children('div.menu-in').css('display', 'block')
        }, function () {
          $(this).removeClass('hover')
          $(this).children('div.menu-in').css('display', 'none')
        })
      })
    }
  }
}
</script>
